<template>
    <div v-loading="listLoading" class="app-form-container">
        <div class="app-container">
            <el-form ref="mainForm" :rules="formRules" :model="temp" label-position="top" :class="{'form-disabled': justRead}">
                <InfoGroup headline="关于我们信息">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="简介描述" prop="contentDescribe">
                                <el-input v-model="temp.contentDescribe" placeholder="" type="textarea" rows="8" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="简介描述 英文" prop="contentDescribeEn">
                                <el-input v-model="temp.contentDescribeEn" placeholder="" type="textarea" rows="8" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <el-form-item label="移动端图片" prop="contentBannerPh">
                                <UploadMedia v-model="temp.contentBannerPh" size="374*498" pb="133%" fit="cover" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="20">
                            <el-form-item label="轮播图" prop="contentImgs">
                                <UploadMediaList v-model="temp.contentImgs" size="800*450" pb="56.25%" fit="cover" :max="5" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </InfoGroup>
            </el-form>
        </div>
        <div class="app-form-footer">
            <el-button class="btn clear right" @click="$router.go(-1)">{{ $t('global.cancel') }}</el-button>
            <el-button class="btn" type="warning" @click="mainSubmit()">{{ $t('global.save') }}</el-button>
            <!--<el-button class="btn" type="primary" @click="mainSubmit(true)">{{ pageType === 'edit' ? $t('global.saveBack') : $t('global.insert') }}</el-button>-->
        </div>
    </div>
</template>

<script>
import {
    contentUpdate as dataUpdate,
    contentById as dataGet
} from '@/api/content'
import { languageList } from '@/utils/data/statusData'
import { parseTime } from '@/utils';
import InfoGroup from '@/components/InfoGroup'
import UploadMedia from '@/components/UploadMedia'
import UploadMediaList from '@/components/UploadMediaList'
import { mapGetters } from 'vuex'

export default {
    name: 'ContentAbout',
    components: { InfoGroup, UploadMedia, UploadMediaList },
    data() {
        return {
            languageList,
            itemId: 'contentId',
            pageType: this.$route.meta.type,
            justRead: ['edit'].includes(this.$route.meta.type),
            listLoading: true,
            classify: [],
            labelList: [],
            info: {},
            temp: {}
        };
    },
    computed: {
        ...mapGetters([
            'language'
        ]),
        formRules() {
            return {};
        }
    },
    created(e) {
        this.listLoading = false;
        this.getData({ [this.itemId]: 4 }).then(res => {});
    },
    methods: {
        parseTime,
        getData(param) {
            return dataGet(param).then(res => {
                this.listLoading = true;
                this.info = { ...res.data };
                this.temp = { ...res.data };
                console.log('赋值咯');
                this.listLoading = false;
            });
        },
        resetTemp() {
            this.temp = {};
        },
        // 新增|修改提交
        mainSubmit(close) {
            this.$refs['mainForm'].validate((valid, item) => {
                const param = {
                    [this.itemId]: '',
                    contentDescribe: '',
                    contentDescribeEn: '',
                    contentBannerPh: '',
                    contentImgs: ''
                };
                for (const key in param) {
                    param[key] = this.temp[key];
                }
                param.contentContactJson = JSON.stringify(this.bannerTemp)
                console.log(param);
                if (valid) {
                    dataUpdate(param).then(res => {
                        this.$notify({
                            message: this.$t('global.editSuccess'),
                            type: 'success'
                        });
                        if (close) this.$router.go(-1);
                    });
                }
            });
        }
    }
};
</script>
<style scoped lang="scss"></style>
